/**
 * Created by NickNi on 2022/4/15.
 */
import React from 'react';
import { Table, Button, message, Modal, Row, Col, Card } from 'antd';
import { getAccountRoleList, setAccountStatus } from '../../service';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
// import { DownOutlined } from '@ant-design/icons';
interface IProps {}
interface IState {
    columns?: any;
    userList: any;
    isLoading: boolean;
}
class BasicTable extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            columns: [
                {
                    title: '账号',
                    dataIndex: 'account',
                    key: 'account',
                },
                {
                    title: '角色名称',
                    dataIndex: 'roleName',
                    key: 'roleName',
                },
                {
                    title: '角色权限',
                    dataIndex: 'roleAuthShow',
                    key: 'roleAuthShow',
                },
                {
                    title: '是否启用',
                    dataIndex: 'isActive',
                    key: 'isActive',
                    render: (row: any, recoed: any) => (
                        <span>
                            <Button type="primary" onClick={() => this.showConfirm(row, recoed)}>
                                {row === 'Y' ? '禁用' : '开启'}
                            </Button>
                        </span>
                    ),
                },
            ],
            userList: [],
            isLoading: false,
        };
    }
    componentDidMount() {
        this.queryAccountRoleList();
    }
    onChange = (row: any, recoed: any) => {
        let data: any;
        if (row === 'Y') {
            data = {
                account: recoed.account,
                isActive: 'N',
            };
        } else {
            data = {
                account: recoed.account,
                isActive: 'Y',
            };
        }
        setAccountStatus(data).then((res) => {
            if (res.code === '1') {
                message.success('操作成功');
            } else {
                message.success('操作失败');
            }
            this.queryAccountRoleList();
        });
    };
    queryAccountRoleList = () => {
        let data = {
            currentPage: 1,
            pageSize: 20,
        };
        this.setState({ isLoading: true });
        getAccountRoleList(data).then((res) => {
            if (res) {
                let { data } = res;
                data.forEach((item: any) => {
                    if (item.isActive === 'Y') {
                        item.isActiveShow = true;
                    } else {
                        item.isActiveShow = false;
                    }
                    if (item.roleAuth === '1') {
                        item.roleAuthShow = '管理员';
                    } else {
                        item.roleAuthShow = '普通用户';
                    }
                });
                this.setState({ userList: data, isLoading: false });
            }
        });
    };
    showConfirm = (row: any, recoed: any) => {
        let text = row === 'Y' ? '禁用' : '开启';
        confirm({
            title: `提示`,
            icon: <ExclamationCircleOutlined />,
            content: `是否${text}此账号`,
            onOk: () => {
                this.onChange(row, recoed);
            },
        });
    };
    render() {
        return (
            <div className="gutter-example">
                <Row gutter={16}>
                    <Col className="gutter-row" md={24}>
                        <div className="gutter-box">
                            <Card title="用户列表" bordered={false}>
                                <Table
                                    columns={this.state.columns}
                                    dataSource={this.state.userList}
                                    pagination={false}
                                    loading={this.state.isLoading}
                                />
                            </Card>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}
export default BasicTable;
